<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>医院收费管理界面</title>
<!--    <script src="/js/jquery.js"></script>-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .div-inline1{ width:1300px; height:150px;background-image:url("/img/e.jpg");display:block}
    /*.div-inline2{ width:1300px; height:50px;background-image:url("/img/e.jpg");display:block;position:absolute;top:100px;left:29px;}*/
    .div-inline3{ width:1000px; height:800px;background-image:url("/img/e.jpg");display:block;position:absolute;top:170px;left:29px;}
    .div-inline4{ width:185px; height:150px;background-image:url("/img/e.jpg");display:block;position:absolute;top:0px;left:1329px;}
    .div-inline5{ width:480px; height:800px;background-image:url("/img/e.jpg");display:block;position:absolute;top:170px;left:1035px;}
    .div-inline6{ width:460px; height:200px;background-image:url("/img/qq.png");background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;display:block;position:absolute;top:100px;left:10px;}
    .div-inline7{ width:900px; height:400px;background-image:url("/img/r.jpg");display:block;position:absolute;top:100px;left:50px;}
    .div-inline8{ width:200px; height:300px;background-image:url("/img/zz.png");background-size:contain;display:block;position:absolute;top:50px;left:50px;}
    .div-inline9{ width:500px; height:300px;background-image:url("/img/e.jpg");background-size:contain;display:block;position:absolute;top:50px;right:100px;}
    .div-inline{display:inline;}
    /*button{
        width: 50px;
        height: 50px;
        border: 1px solid blue;
        background-color: blue;
        color: red;
        border-radius: 5px;
        -webkit-box-shadow: 2px 2px 2px gray;
        -moz-box-shadow: 2px 2px 2px gray ;
        box-shadow: 2px 2px 2px gray ;
    }*/
    button:hover{
        background-color: green;
        cursor: pointer;
    }
    .box{
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2);
        display: none;
    }
    .box1{
        width: 500px;
        height: 500px;
        position: fixed;left: 50%; top: 20%;
        margin-left: -250px;
        border: 1px solid #000000;
    }
    #testContainer {text-align: center;}
</style>
<body>
<div class="div-inline1"style="color: black; margin-left: 20px;text-align:center;font-size:60px;";>欢迎来到门诊收费管理系统</div><br>

<br>

<div class="div-inline4">

<!--    <div><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        登录
    </button></div>-->

    <div style="text-align:center;"><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        管理员入口
    </button></div>

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><!--  模态框 -->
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <div style="text-align:center;"><h4 class="modal-title" id="myModalLabel">登录</h4></div>
                </div><br><br><br>


                <form name="input" action="/xiumu" method="post">
                    <div style="text-align:center;"> <input name="username" type="search" class="header_search" id="name" placeholder="请输入用户名"></div><br><br>
                    <div style="text-align:center;"> <input name="password" type="password" class="header_search" id="mima" placeholder="请输入密码"></div>
                    <br><br>
                    <div style="text-align:center;"><button type="submit" >登录</button></div>


                </form>
                <br><br><br><br>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

</div>
<div class="div-inline5">
    <div style="color: black; margin-left: 20px;font-size:30px;position:absolute;top:20px;left:50px;">收费栏</div>
    <div style="color: black; margin-left: 20px;font-size:30px;position:absolute;top:20px;right:50px;">
        <button onclick="add1();"class="btn btn-primary btn-lg"type="button" >统计</button></div>



    <div th:each="item : ${list}">
        <div id="money" class="div-inline6" th:if=" ${ctr1} eq'5'">
            <div  style="position:absolute;top:40px;left:50px;" th:text="${nameid}"></div>
            <div  style="position:absolute;top:40px;left:150px;" th:text="${costid}"></div>
            <form action="/lxxx" method="post">
                <div style="display:none;"><input type="text" name="tname" th:value="${nameid}"></div>
                <div style="display:none;"><input type="text" name="tcost" th:value="${need}"></div>
            <div style="position:absolute;top:120px;right:50px;"><button onclick="dlete2();"class="btn btn-primary btn-lg"type="submit">取消</button></div>
            </form>
<!--            <div style="position:absolute;top:120px;right:150px;"><button onclick="creatediv();"class="btn btn-primary btn-lg"type="button">开始</button></div>-->
        </div>
    </div>


</div>

</div>
<style>
.jd_header {
    box-sizing: border-box;
    position:absolute;top:10px;left:20px;
    height: 45px;
    width: 80%;
    margin-left: 60px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    z-index: 50;
    background-color: #0000FF;
}

.jd_header .header_search {
    box-sizing: border-box;
    padding-left: 10px;
    width: 90%;
    height: 37px;
    margin-top: 4px;
    border-radius: 17px;
    background: rgba(255,255,255,0.9);
    font-size: 14px;
    color: #999;
    border: none;
}
.jd_header .header_search1 {
    box-sizing: border-box;
    padding-right: 10px;
    width: 10%;
    height: 37px;
    margin-top: 4px;
    border-radius: 17px;
    background: rgba(255,255,255,0.9);
    font-size: 14px;
    color: #999;
    border: none;
}
.jd_header .header_glass {
    display: inline-block;
    position: absolute;
    right: 36px;
    top: 15px;
    width: 20px;
    height: 20px;
    background: url(/img/r.jpg)no-repeat;
    background-size: 16px 16px;
}
</style>
<div class="div-inline3">
    <div class="jd_header">
        <form name="input" action="/xiumu" method="post">
        <input name="content" type="search"  class="header_search" id="searchInput" placeholder="检索收费项目"><!--class="header_search"-->
        <input class="btn btn-primary btn-lg" type="submit"  value="查询">
        </form>
    </div>

    <div th:if=" ${ctr} eq'2'">
        <div class="div-inline7">
          <div class="div-inline8"></div>

<!--            <form action="/xiumu1" method="post">-->
                <div style="display:none;"><input type="text" name="sname" value="tianjia"></div>
            <div style="position: absolute;right:20px;top:350px"><button id="tianjia"onclick="a();"class="btn btn-primary btn-lg"><!--type="submit"-->添加到收费栏</button></div>


            <div class="div-inline9">
                <div style="position:absolute;top:40px;left:50px;">名称  :</div>
                <div style="position:absolute;top:40px;left:100px;"th:text="${nameid}"></div>
                <div style="position:absolute;top:100px;left:50px;">价格  :</div>
                <div style="position:absolute;top:100px;left:100px;"th:text="${costid}"></div>
                <div style="position:absolute;top:200px;left:50px;">数量  :</div>
                <div>
                <div style="position:absolute;top:190px;left:100px;"><button type="button" onclick="jian()" class="btn btn-primary btn-lg">-</button></div>
                <div style="position:absolute;top:200px;left:168px;"id="num" name="howmuch">1</div>
                <div style="position:absolute;top:190px;left:200px;"><button type="button" onclick="jia()" class="btn btn-primary btn-lg">+</button></div>
                </div>
            </div>

<!--            </form>-->
        </div>
        <button onclick="test();"></button>
    </div>

</div>
<script language="javascript">

    var x=1;
    function a()
    {
   $.ajax({
        type: "post",
        url: "/xiumu2",
        data: {howmuch:$("#howmuch").val(),sname:$("#sname").val()},
       dataType: "json",
        success: function(data) {

            //x=data;
            alert("msg:"+data);
            var d=document.getElementById("num")
            d.innerHTML=x;
        }
    })
    }
    function jia() {
        x++;
        var d=document.getElementById("num")
        d.innerHTML=x;
    }
    function jian() {
        if(x>0)
        {x--;}
        var d=document.getElementById("num")
        d.innerHTML=x;
    }


    function add() {
        $id = document.getElementById("money");
        $id.style.display = 'block';
    }
    function dlete() {
        $id = document.getElementById("worn");
        $id.style.display = 'none';
    }
    function dlete1() {
        $id = document.getElementById("worn1");
        $id.style.display = 'none';
    }

    function open() {
        $id = document.getElementById("worn4");
        $id.style.display = 'block';
    }
    function open1() {
        $id = document.getElementById("worn3");
        $id.style.display = 'block';
    }
    function dlete4() {
        $id = document.getElementById("worn4");
        $id.style.display = 'none';
    }
    function dlete5() {
        $id = document.getElementById("worn3");
        $id.style.display = 'none';
    }

    function dlete2() {
        $id = document.getElementById("money");
        $id.style.display = 'none';
    }
    function add1() {
        $id = document.getElementById("add1");
        $id.style.display = 'block';
    }
    function dlete3() {
        $id = document.getElementById("add1");
        $id.style.display = 'none';
    }

</script>

<div th:if="${msg} eq '3'" id="worn"><!--  模态框 -->
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <div style="text-align:center;"><h4 class="modal-title">警告</h4></div>
            </div><br><br><br>


            <div style="text-align:center;">用户名或者账号错误</div>
            <br><br><br><br>

                <div style="text-align:center;"><button onclick="dlete();" type="button">返回</button></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div th:if="${ctr} eq '3'" id="worn1"><!--  模态框 -->
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <div style="text-align:center;"><h4 class="modal-title">警告</h4></div>
            </div><br><br><br>


            <div style="text-align:center;">没有该药物</div>
            <br><br><br><br>

            <div style="text-align:center;"><button onclick="dlete1()" type="button">返回</button></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div style="display: none" id="worn3"><!--  模态框 -->
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <div style="text-align:center;"><h4 class="modal-title">请支付</h4></div>
            </div><br><br><br>


            <div style="text-align:center;"><img src="../img/asd.png" width="165" height="165" /></div>
            <br><br><br><br>

            <div style="text-align:center;"><button onclick="dlete5()" type="button">返回</button></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div style="display: none" id="add1"><!--  模态框 -->
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <div style="text-align:center;"><h4 class="modal-title">统计结果</h4></div>
            </div><br><br><br>

            <div style="text-align:center;">一共有<div th:text="${money}"></div>元钱的药物</div>
            <br><br><br><br>

             <div style="text-align:center;">

                 <form action="/xiumu" method="post">

                     <div style="display:none;"><input type="text" name="fname" value="Mickey"></div>

                     <div style="text-align:center;"class="div-inline"><button  type="submit">重置</button></div>
                     <a href="/lx">
                         <div style="text-align:center;"class="div-inline"><button type="button">打印</button></div>
                     </a>
<!--                     <a href="http://localhost:8080/xiumu"></a>-->
                     <div style="text-align:center;"class="div-inline"><button onclick="open1();"type="button">支付</button></div>

                     <div style="text-align:center;"class="div-inline"><button onclick="dlete3();" type="button">返回</button></div>

                 </form>
             </div>


        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

</body>
</html>